<template>
  <view
    class="unfold-container"
    :style="styleWidth"
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
  >
    <view class="unfold-content">
      <view class="silter-left" @tap="openUnfold"></view>
      <view class="btn-group">
        <image
          class="btn-item"
          v-for="(item, index) in btnList"
          :key="index"
          :src="item.img"
          :lazy-load="true"
          @tap="onClickOperate($event, item.trigger, {})"
        />
      </view>
    </view>
  </view>
</template>
<script>
import box_1 from '../img/box-g-1.png';
import lottery_1 from '../img/lottery-0.png';
import noice_1 from '../img/noice-1.png';
import re_1 from '../img/re-1.png';

import tools from '@/shopro/utils/tools';
const _delay = tools.delayDither(300);
import { mapActions } from 'vuex';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    activeId: {
      type: [String, Number],
      default: '',
    },
  },
  data() {
    return {
      touchAxis: {
        x: '',
        y: '',
      },

      //打开状态
      openType: false,
      // 音效打开关闭
      sound: false,

      //按钮列表
      btnList: [
        {
          name: '音效',
          trigger: 'noise',
          img: noice_1,
        },
        {
          name: '中奖记录',
          trigger: 'history',
          img: lottery_1,
        },
        {
          name: '盒柜',
          trigger: 'cabinet',
          img: box_1,
        },
        {
          name: '刷新',
          trigger: 'refresh',
          img: re_1,
        },
      ],
    };
  },
  // 计算属性 适配者模式
  computed: {
    styleWidth() {
      return this.openType ? ' width: 440rpx;' : 'width: 68rpx;';
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    ...mapActions(['changeActiveHGId']),
    /**
     *  页面点击事件 防抖
     * @param {Object} ev  $event
     * @param {String} name 执行名称
     * @param {Object} data 传值
     */

    onClickOperate(ev, name, data = {}) {
      _delay(() => {
        switch (name) {
          // 切换 音效
          case 'noise':
            this.sound = !this.sound;
            this.operate({
              type: 'noise',
              value: this.sound,
            });
            break;
          // 开奖记录
          case 'history':
            this.operate({
              type: 'history',
              value: true,
            });
            break;
          // 盒柜跳转
          case 'cabinet':
            this.changeActiveHGId({
              type: 'luckybag',
              id: this.activeId,
            });
            uni.switchTab({
              url: '/pages/index/cart',
            });
            this.operate({
              type: 'cabinet',
              value: true,
            });
            break;
          // 刷新
          case 'refresh':
            this.operate({
              type: 'refresh',
              value: true,
            });
            break;
        }
      });
    },
    // 操作 回调
    operate(e) {
      this.$emit('unfold', {
        type: e.type,
        status: e.value,
      });
    },
    // 打开 额外按钮
    openUnfold() {
      this.openType = !this.openType;
    },
    // 触碰开始
    touchStart: function (event) {
      this.touchAxis.x = event.touches[0].pageX;
      this.touchAxis.y = event.touches[0].pageY;
    },
    // 触摸移动事件
    touchMove: function (e) {},
    // 触摸结束事件
    touchEnd: function (event) {
      let currentX = event.changedTouches[0].pageX;
      let currentY = event.changedTouches[0].pageY;
      let tx = currentX - this.touchAxis.x;
      let ty = currentY - this.touchAxis.y;

      //左右方向滑动
      if (Math.abs(tx) > Math.abs(ty)) {
        if (tx < 0) {
          // 向左滑动
          // console.log('向左滑动');
          this.openType = true;
        } else if (tx > 0) {
          // 向右滑动
          // console.log('向右滑动');
          this.openType = false;
        }
      }
      //上下方向滑动
      else {
        if (ty < 0) {
          // console.log('向上滑动');
        } else if (ty > 0) {
          // console.log('向下滑动');
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.unfold-container {
  position: fixed;
  bottom: 24vh;
  right: 0;
  z-index: 20;
  width: 440rpx;
  height: 102rpx;
  overflow: hidden;
  transition: all 0.6s;
  animation: fade 1s linear 0s 1 normal none;
  view image {
    max-width: none;
  }
  .unfold-content {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 14rpx 0 48rpx;
    width: 440rpx;
    height: 102rpx;
    background: #fff;
    border-radius: 30rpx 0 0 30rpx;
    box-shadow: 0 0 6rpx rgba(0, 0, 0, 0.3);

    .silter-left {
      position: absolute;
      top: 50%;
      left: 10rpx;
      transform: translateY(-50%);
      width: 6rpx;
      height: 38rpx;
      border-radius: 38rpx;
      background-image: linear-gradient(
        90deg,
        rgba(169, 82, 217, 1),
        rgba(116, 92, 232, 1)
      );
      &::after {
        content: '';
        display: block;
        width: 48rpx;
        height: 100%;
      }
    }

    .btn-group {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 100%;
      .btn-item {
        flex-shrink: 0;
        width: 90rpx;
        height: 90rpx;
      }
    }
  }
}
</style>
